'use strict';
import {createElement, Component,render} from 'rax';
import {View,Text} from 'nuke';
import styles from './index.less';

class Countdown extends Component {
    constructor(props) {
        super(props);
        this.state = {
			countdown:this.props.countdown,
			minute_unit:0,
			minute_decade:0,
			seconds_unit:0,
			seconds_decade:0
		};
		styles.minute_decade.color = this.props.countdownColor;
		styles.minute_unit.color = this.props.countdownColor;
		styles.seconds_unit.color = this.props.countdownColor;
		styles.seconds_decade.color = this.props.countdownColor;
		setInterval(this.countdown.bind(this),1000);
    }
	componentWillMount(){
		this.countdown();
	}
    countdown(){
		const countdown = this.state.countdown;
		const minute = parseInt(countdown/60);
		const minute_unit = parseInt(minute%10);
		const minute_decade = parseInt(minute/10);
		const seconds = parseInt(countdown%60);
		const seconds_unit = parseInt(seconds%10);
		const seconds_decade = parseInt(seconds/10);
		if(this.state.countdown>=0){
			this.setState({minute_unit,minute_decade,seconds_unit,seconds_decade,countdown:countdown-1});
		}
	}
    render() {
        return (
		  <View>
			<img style={styles.img} src={this.props.img} />
			<Text style={styles.minute_decade}>
			{this.state.minute_decade}
			</Text>
			<Text style={styles.minute_unit}>
			{this.state.minute_unit}
			</Text>
			<Text style={styles.seconds_decade}>
			{this.state.seconds_decade}
			</Text>
			<Text style={styles.seconds_unit}>
			{this.state.seconds_unit}
			</Text>
		  </View>
        );
    }
}

export default Countdown;
